<script setup>
import { ref, defineOptions } from 'vue'
import TopTitle from "@/components/TopTitle.vue"
import { getTopicList } from "@/api/getAxios_2.ts"
import { showToast } from 'vant';


const topicList = ref([])
const pageNo = ref('1')
getTopicList('1').then((res) => {
    console.log(res);
    topicList.value = res.data.data.list;
})

/**************************************** */
let flag = true
// 触底请求更多数据
const scrollHandler = (e) => {
    // console.log(types.value[types.value.length - 1]);
    const li = document.querySelector('.type1').children[topicList.value.length - 1]
    // console.log(li.offsetTop);
    // console.log(e.target.scrollTop + 680);
    if (e.target.scrollTop + 980 >= li.offsetTop && flag) {
        flag = false
        pageNo.value = (Number(pageNo.value) + 1).toString()
        getTopicList(
            pageNo.value
        ).then((res) => {
            // console.log(res);
            res.data.data.list.forEach(o => topicList.value.push(o))
            flag = true
            if (res.data.data.list.length == 0) {
                showToast('已经到底啦！')
                return
            }
        })
    }
}

</script>
<template>
    <div class="box" @scroll="scrollHandler($event)">
        <TopTitle :flag="true" name="专题"></TopTitle>
        <ul class="type1">
            <li v-for="item in topicList" @click="$router.push(`/topic?id=${item.id}`)">
                <img :src="item.cover" alt="">
                <p class="title">{{ item.title }}</p>
            </li>
        </ul>
    </div>
</template>

<style scoped lang='less'>
.box {
    height: 100vh;
    overflow: scroll;

    &::-webkit-scrollbar {
        display: none;
    }

    ul {
        width: 90vw;
        margin: 0 auto;

        // margin-left: 10px;
        li {
            width: 100%;
            border-bottom: 3px solid #eee;
            margin: 10px 0;

            img {
                width: 100%;
                height: 40vw;
            }

            p.title {
                height: 10vw;
                width: 100%;
                background-color: #fff;
                font-size: 18px;
                text-align: center;
                margin-top: -5px;
                line-height: 10vw;
            }
        }
    }
}
</style>